<template>
	<view :data-theme="theme" class="container">
		<view class="header">
			<view class="cart_nav" :style='"height:"+navH+"rpx;"'>
				<view class='navbarCon acea-row'>
					<!-- #ifdef MP -->
					<view class="select_nav flex justify-center align-center" id="home"
						:style="{ top: mpHomeTop*2 + 'rpx' }">
						<text class="iconfont icon-fanhui2 px-20" @tap="returns"></text>
						<text class="iconfont icon-gengduo5 px-20" @click="showRight"></text>
						<text class="nav_line"></text>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back"
						:style="{ top: homeTop + 'rpx' }" @tap="returns">
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="home acea-row nav_title row-center-wrapper" :style="{ top: homeTop + 'rpx' }">
						优惠券信息
					</view>
					<!-- #endif -->
					<!-- #ifdef APP -->
					<view class="nav_title" :style="{ top: navH + 'rpx' }">购物车</view>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<view class="nav_title" :style="{ top: navH + 'rpx' }">优惠券信息</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="right_select" :style="{ top: homeTop + 'rpx' }" @click="showRight">
						<!-- <text class="iconfont icon-gengduo2"></text> -->
						领取记录
					</view>
					<!-- #endif -->
				</view>
			</view>
			<!-- #ifdef MP -->
			<view class="bg_color" style="box-sizing: border-box;" :style='"padding-top:"+navH*2+"rpx;"'>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="bg_color" style="box-sizing: border-box;" :style='"margin-top:"+navH+"rpx;"'>
			</view>
			<!-- #endif -->
			
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<u-search v-model="keyWord" @custom="searchProduct" @search="searchProduct" placeholder="请输入优惠券名称"
					actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
			</view>

			<!-- 日期筛选 -->
			<view style="background-color: #fff;" :style='"top:"+navH+"rpx;"'>
				<view style="display: flex; flex-flow: row;height: 40px;line-height: 40px;">
					<picker model="selector" @change="statusChange" range-key="name" :value="statusIndex"
						:range="statusList" @cancel="cancelPicker"
						style="display: flex;justify-content: center;flex: 1;">
						<view style="display: flex;justify-content: center;flex: 1;"
							:style="{color:statusTypeShow?bgColor:null}" @click="statusTypeShow = true">
							<view style="font-size: 14px;margin-right: 6rpx;">开启状态</view>
							<u-icon :name="statusTypeShow?'arrow-up-fill':'arrow-down-fill'" size="12"
								:color="statusTypeShow?bgColor:''"></u-icon>
						</view>
					</picker>
					<picker model="selector" @change="receiveTypeChange" range-key="name" :value="receiveTypeIndex"
						:range="receiveTypeList" @cancel="cancelPicker"
						style="display: flex;justify-content: center;flex: 1;">
						<view style="display: flex;justify-content: center;flex: 1;"
							:style="{color:receiveTypeShow?bgColor:null}" @click="receiveTypeShow = true">
							<view style="font-size: 14px;margin-right: 6rpx;">领取方式</view>
							<u-icon :name="receiveTypeShow?'arrow-up-fill':'arrow-down-fill'" size="12"
								:color="receiveTypeShow?bgColor:''"></u-icon>
						</view>
					</picker>
					<picker model="selector" @change="categoryPickerChange" range-key="name" :value="radioIndex"
						:range="radiolist" @cancel="cancelPicker"
						style="display: flex;justify-content: center;flex: 1;">
						<view style="display: flex;justify-content: center;flex: 1;"
							:style="{color:categoryShow?bgColor:null}" @click="categoryShow = true">
							<view style="font-size: 14px;margin-right: 6rpx;">优惠券类别</view>
							<u-icon :name="categoryShow?'arrow-up-fill':'arrow-down-fill'" size="12"
								:color="categoryShow?bgColor:''"></u-icon>
						</view>
					</picker>
				</view>
			</view>
		</view>

		<scroll-view class="scroll-view" @scrolltolower="scrolltolowerFn" scroll-y
			style="height: 100%; overflow: hidden;">
			<!-- 封装组件 -->
			<swiper-page-couponlist ref="tab"></swiper-page-couponlist>
		</scroll-view>

		<view class="footer">
			<view style="margin:0 20rpx 20rpx 20rpx;">
				<button :color="bgColor" class="bg_color"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;" @click="goAddConsign()">
					+ 添加优惠券</button>
			</view>
		</view>

	</view>
</template>

<script>
	import swiperPageCouponlist from '../components/nvue-swiper-page-couponlist.vue';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			swiperPageCouponlist,
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				keyWord: '',
				statusTypeShow: false,
				mpHomeTop: 50,
				navH: 96,
				homeTop: 20,
				statusList: [{
					name: '开启',
					status: 1,
				}, {
					name: '未开启',
					status: 0,
				}],
				statusIndex: 0,
				receiveTypeList: [{
					name: '手动领取',
					type: '1',
				}, {
					name: '赠送券',
					type: '2',
				}],
				receiveTypeShow: false,
				receiveTypeIndex: 0,
				radiolist: [{
					name: '商家券',
					category: '1',
				}, {
					name: '商品券',
					category: '2',
				}],
				radioIndex: 0,
				categoryShow: false,
			}
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			let that = this;

			// #ifndef MP
			that.navH = 96;
			// #endif
		},
		methods: {
			scrolltolowerFn() {
				this.$refs.tab.scrolltolowerFn();
			},
			//关键字查询
			searchProduct(value) {
				this.$refs.tab.searchProduct(value);
			},
			goAddConsign() {
				this.goPage(`/pages/marketing/addSaveCoupon/addSaveCoupon`);
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			// onNavigationBarButtonTap 函数进行监听  不可变
			// #ifdef H5
			showRight() {
				this.goPage(`/pages/marketing/userCouponList/userCouponList`);
			},
			// #endif
			showRight() {
				this.goPage(`/pages/marketing/userCouponList/userCouponList`);
			},
			returns: function() {
				uni.redirectTo({
					url: '/pages/marketing/marketing'
				})
			},
			//------------------------
			// 选择开启状态
			statusChange(e) {
				let i = e.detail.value;
				let status = this.statusList[i].status;
				this.statusTypeShow = false;
				this.$refs.tab.statusTypeConfirm(status);
			},
			// 取消选择
			cancelPicker() {
				this.statusTypeShow = false;
				this.receiveTypeShow = false;
				this.categoryShow = false;
			},
			// 选择领取方式
			receiveTypeChange(e) {
				let i = e.detail.value;
				let receiveType = this.receiveTypeList[i].type;
				this.receiveTypeShow = false;
				this.$refs.tab.receiveTypeConfirm(receiveType);
			},
			// 优惠券类别
			categoryPickerChange(e) {
				let i = e.detail.value;
				let category = this.radiolist[i].category;
				this.categoryShow = false;
				this.$refs.tab.categoryeConfirm(category);
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		background-color: #fff;
	}

	.cart_nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
	}

	.navbarCon {
		position: absolute;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		@include main_bg_color(theme);
	}

	.select_nav {
		width: 170rpx !important;
		height: 60rpx !important;
		border-radius: 33rpx;
		border: 1px solid rgba(255, 255, 255, .5);
		color: #fff;
		position: fixed;
		font-size: 18px;
		line-height: 58rpx;
		z-index: 1000;
		left: 14rpx;
	}

	.navbarCon .select_nav {
		// margin-top: 104rpx;
	}

	.h5_back {
		color: #fff;
		position: fixed;
		left: 20rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 58rpx;
	}



	//    .nav_line {
	//    	content: '';
	//    	display: inline-block;
	//    	width: 1px;
	//    	height: 34rpx;
	//    	background: #fff;
	//    	position: absolute;
	//    	left: 0;
	//    	right: 0;
	//    	margin: auto;
	//    }


	// .tab_nav {
	// 	width: 100%;
	// 	height: 48px;
	// 	padding: 0 30rpx 0;
	// }

	.nav_title {
		width: 200rpx;
		color: #fff;
		font-size: 36rpx;
		position: fixed;
		text-align: center;
		left: 0;
		right: 0;
		margin: auto;
	}

	.px-20 {
		padding: 0 20rpx 0;
	}

	.right_select {
		position: fixed;
		right: 20rpx;
		color: #fff;
		text-align: center;
		line-height: 58rpx;
	}


	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	// .content {
	// 	flex: 1;
	// 	overflow: hidden;
	// }

	.scroll-view {
		height: 100%;
	}
</style>